<template>
  <view class="pay">
    <!-- 1 收货地址 -->
    <view class="address u-p-20">
         <view class="address-detail" v-if="userAddress">
        <view class="address-detail">{{ detailAddress }}</view>
        <view class="address-user"
          >{{ userAddress.userName }} {{ userAddress.telNumber }}</view
        >
      </view>

      <view v-else class="address-btn u-flex u-row-center">
        <u-button
          shape="circle"
          type="error"
          plain
          size="medium"
          :custom-style="{ backgroundColor: '#fff!important' }"
          @click="handleChooseAddress"
          >获取收货地址</u-button
        >
      </view>

   
    </view>

    <u-line color="#eee"></u-line>

    <!-- 2 已选商品 -->
    <view class="goods-list u-p-15">
      <view class="goods-list-title">已选商品</view>
      <view class="goods-list-content">
        <view class="cart-item">
          <!-- 2 图片 -->
          <view class="goods-img">
            <u-image width="191rpx" height="191rpx"></u-image>
          </view>
          <!-- 3 信息 -->
          <view class="goods-info">
            <!-- 名称 -->
            <view class="goods-name u-line-2">xxx</view>
            <!-- 价格和数量 -->
            <view class="goods-price-num">
              <view class="goods-price">￥xxx</view>
              <view class="goods-num-tool">
                <view class="goods-vnum">Xxxx</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 2 统计 -->
    <view class="statistics">
      <view class="all-price"> 合计: <text>￥xxx</text> </view>
      <view class="all-count">
        <u-button type="error" shape="circle"  @click="handlePay">去支付(xxx)</u-button>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";
export default {
 
  data() {
    return {
      // 收货地址
      userAddress: null,
    };
  },
  computed: {
        ...mapState("user", ["token"]),
    ...mapGetters("cart", [
      "checkGoodsList",
      "totalNums",
      "totalPrice",
    ]),
    // 详细的收货地址信息
    detailAddress() {
      if (!this.userAddress) return "";

      const { provinceName, cityName, countyName, detailInfo } =
        this.userAddress;
      return provinceName + cityName + countyName + detailInfo;
    },
  },
  methods: {
        ...mapActions("user", ["fetchToken"]),
    // 点击按钮 获取用户的收货地址
    async handleChooseAddress() {
      const [err, result] = await uni.chooseAddress();
      if (err) {
        console.log("出错啦");
        console.log(err);
      } else {
        console.log("成功");
        console.log(result);
        this.userAddress = result;
      }
    },
   async    handlePay() {
      // 判断有没有收货地址
      if (this.userAddress) {
      
         //#region 获取token
        // 调用小程序的api  获取用户信息
    
            if (!this.token) {
          // 调用action 来获取token
          await this.fetchToken();
        }

        //#endregion

        //#region 创建订单

        // 创建订单 请求体参数
        const orderParams = {
          // 	订单总价格
          order_price: this.totalPrice,
          // 	收货地址
          consignee_addr: this.detailAddress,
          // 	订单数组
          goods: this.checkGoodsList.map((v) => ({
            goods_id: v.goods_id,
            goods_number: v.num,
            goods_price: v.goods_price,
          })),
        };

        // 发起创建订单的请求
        const result4 = await this.$u.post("/my/orders/create", orderParams);

  console.log('结果4',result4.message);
        // 订单编号
        const { order_number } = result4.message;

        //#endregion

        
        //#region  获取支付参数

   const result5 = await this.$u.post("/my/orders/req_unifiedorder", {
          order_number,
        });

        const { pay } = result5.message;

        //#endregion

        //#region 调起微信小程序内 微信支付
        const result6 = await uni.requestPayment(pay);

        //#endregion

        //#region 调用接口 看一下 订单支付正常了没有
         const result7 = await this.$u.post("/my/orders/chkOrder", {
          order_number,
        });
        console.log(result7);
        // 判断订单状态
        if (result7.meta.status === 200) {
          // 支付成功
          console.log("可以跳转到 订单页面-待发货");
        } else {
          // 支付失败
          console.log("都是跳转到 订单页面-待支付");
        }

        //#endregion
      } else {
        uni.showToast({
          title: "您还没有选择收货地址",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss">
.pay {
  padding-bottom: 111rpx;
}
.cart-item {
  display: flex;
  padding: 10rpx;
  border-bottom: 1rpx solid #ccc;

  .goods-img {
    flex: 2;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .goods-info {
    color: #666;
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .goods-name {
    }

    .goods-price-num {
      display: flex;
      justify-content: space-between;
      .goods-price {
        color: #eb4450;
      }

      .goods-num-tool {
        width: 140rpx;
        height: 40rpx;

        display: flex;
        justify-content: flex-end;

        .goods-vnum {
        }
      }
    }
  }
}
.statistics {
  position: fixed;
  background-color: #fff;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  border-top: 1rpx solid #ccc;
  display: flex;
  align-items: center;
  padding: 15rpx;
  .all-price {
    flex: 1;
    color: #666;
    text {
    }
  }

  .all-count {
  }
}
</style>